<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>首页</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../../static/style/admin.css" media="all">
</head>
<body>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md8">    
        <div class="layui-card">
          <div class="layui-card-header">
            最近更新
            <a lay-href="" class="layui-a-tips">全部更新</a>
          </div>
          <div class="layui-card-body">
            <div class="layui-row layui-col-space10">
              <div class="layui-col-xs12 layui-col-sm4">
                <div class="layuiadmin-card-text">
                  <div class="layui-text-top"><i class="layui-icon layui-icon-water"></i><a lay-href="">库存模块</a></div>
                  <p class="layui-text-center">库存模块包括仓库管理，库存一览，入库单明细管理等</p>
                  <p class="layui-text-bottom"><a lay-href="">第7组</a><span>14 天前</span></p>
                </div>
              </div>
              <div class="layui-col-xs12 layui-col-sm4">
                <div class="layuiadmin-card-text">
                  <div class="layui-text-top"><i class="layui-icon layui-icon-form"></i><a lay-href="">财务模块</a></div>
                  <p class="layui-text-center">财务模块包括财务表一览，账单管理，应付预收单管理等</p>
                  <p class="layui-text-bottom"><a lay-href="">第7组</a><span>7 天前</span></p>
                </div>
              </div>
              <div class="layui-col-xs12 layui-col-sm4">
                <div class="layuiadmin-card-text">
                  <div class="layui-text-top"><i class="layui-icon layui-icon-cart"></i><a lay-href="">采购模块</a></div>
                  <p class="layui-text-center">采购模块包括采购合同表，采购进货明细表，供应商表等</p>
                  <p class="layui-text-bottom"><a lay-href="">第7组</a><span>5 天前</span></p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header">每日重点数据</div>
          <div class="layui-card-body">
            <div id="main1" style="width: 720px;height: 300px"></div>
          </div>
        </div>     
      </div>
      <div class="layui-col-md4">
        <div class="layui-card">
          <div class="layui-card-header">便捷导航</div>
          <div class="layui-card-body">
            <div class="layuiadmin-card-link">
              <a href="/stock/stockhouse">仓库管理</a>
              <a href="/stock/stockpile">库存一览</a>
              <a href="/stock/product">商品目录</a>
              <a href="/stock/enterstockdetail">入库明细</a>
              <a href="/stock/backstockdetail">退库明细</a>
              <a href="/finance/receivables">应收单</a>
              <a href="/finance/receivablesPay">应付单</a>
              <button class="layui-btn layui-btn-primary layui-btn-xs">
                <i class="layui-icon layui-icon-add-1" style="position: relative; top: -1px;"></i>添加
              </button>
            </div>        
          </div>
        </div>
        <div class="layui-card">
          <div class="layui-card-header">雷达图</div>
          <div class="layui-card-body">
            <div id="main5" style="width: 350px;height: 300px"></div>
        </div>
      </div>
    </div>
      <div class="layui-col-md4">
        <div class="layui-card">
          <div class="layui-card-header">版本信息</div>
          <div class="layui-card-body layui-text">
            <table class="layui-table">
              <colgroup>
                <col width="100">
                <col>
              </colgroup>
              <tbody>
              <tr>
              <tr>
                <td>系统名称</td>
                <td>第7组-服装进销存管理系统</td>
              </tr>
                <td>当前版本</td>
                <td>
                  <script type="text/html" template>
                    V1.6.9
                    <a href="" target="_blank" style="padding-left: 10px;">日志</a>
                  </script>
                  <a href="javascript:;" layadmin-event="update" style="padding-left: 5px;">检查更新</a>
                </td>
              </tr>
              <tr>
                <td>基于框架</td>
                <td>
                  <script type="text/html" template>
                    layui-v{{ layui.v }}
                  </script>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
  </div>
  </div>
  <script src="../../../static/layui/layui.js"></script>
  <script src="../../../static/layui/layui.all.js"></script>
  <script src="../../../static/js/jquery.js"></script>
  <script src="../../../static/js/echarts.js"></script>
  <script src="../../../static/js/echarts.min.js"></script>
  <script>
      layui.config({
        base: '../../../static/' //静态资源所在路径
      }).extend({
        index: 'lib/index' //主入口模块
      }).use('index');
    </script>
  <script>
    $(function () {
      $.ajax({
        type : "post",
        async : true,
        url: '/stock/getdetail',
        dataType: "json",
        success: function (data) {
          var productids=[];
          var quantitys = [];
          var quantity_assists = [];
          for (var i = 0; i < data.data.length; i++) {
            productids.push(data.data[i].productid);
            quantitys.push(data.data[i].quantity);
            quantity_assists.push(data.data[i].quantity_assist);
          }
          var chartDom = document.getElementById('main5');
          var myChart = echarts.init(chartDom);
          var option;
          option = {
            title: {
              text: '库存量'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['主计量', '辅计量'],
              left :'right'
            },
            radar: {
              // shape: 'circle',
              indicator: [
                { name: productids[0], max: 650},
                { name: productids[1], max: 650},
                { name: productids[2], max: 650},
                { name: productids[3], max: 650},
                { name: productids[4], max: 650}
              ]
            },
            series: [{
              name: '预算 vs 开销（Budget vs spending）',
              type: 'radar',
              data: [
                {
                  value:quantitys,
                  name: '主计量'
                },
                {
                  value: quantity_assists,
                  name: '辅计量'
                }
              ]
            }]
          };
          option && myChart.setOption(option);
        }
      });
    });
  </script>
  <script>
    $(function () {
      $.ajax({
        type : "post",
        async : true,
        url: '/stock/getdetail',
        dataType: "json",
        success: function (data) {
          var productids=[];
          var quantitys=[];
          for (var i = 0; i < data.data.length; i++) {
            productids.push(data.data[i].productid);
            quantitys.push(data.data[i].quantity);
          }
          var chartDom = document.getElementById('main1');
          var myChart = echarts.init(chartDom);
          var option;

          option = {
            title: {
              text: '产品库存量一览图'
            },
            toolbox: {
              show: true,
              feature: {
                dataZoom: {
                  yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: productids,
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                name: '数量',
                type: 'value'
              }
            ],
            series: [
              {
                name: '库存数量',
                type: 'bar',
                barWidth: '60%',
                data: quantitys,
                itemStyle: {
                  //通常情况下：
                  normal:{
                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                    color: function (params){
                      var colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de','#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'];
                      return colorList[params.dataIndex];
                    }
                  }
                }
              }
            ]
          };
          option && myChart.setOption(option);
        }
      });

    });
  </script>
</body>
</html>